<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-09-11 12:23:07
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-11 17:27:00
 -->
<style lang="less" scoped>
.outMoneyBox{
  width: 100%;
  .wrap{
    width: 100%;
    .part1{
      width: 100%;
      height: 13.34rem;
      background: url('../../assets/wap/outBg1@2x.png') no-repeat;
      background-size: 100% 100%;
      .introBox{
        width: 6.08rem;
        height: 6.39rem;
        background:rgba(253,55,26,0.7);
        margin-top: 0.74rem;
        margin-left: 0.39rem;
        box-sizing: border-box;
        padding: 0.25rem 0.34rem 0 0.29rem;
        .line{
          width:0.52rem;
          height:0.08rem;
          background:rgba(250,65,18,1);
        }
        .title{
          font-size: 0.6rem;
          font-weight: bold;
          color: #ffffff;
          margin-top: 0.17rem;
        }
        .ct{
          color: #ffffff;
          font-size: 0.24rem;
          line-height: 0.3rem;
          padding-left: 0.03rem;
        }
        .ct1{
          padding-top: 0.23rem;
        }
        .phoneBox{
          margin-top: 0.44rem;
          display: flex;
          width:3.03rem;
          height:0.84rem;
          background:rgba(51,51,51,0);
          border:1px solid rgba(255,255,255,1);
          align-items: center;
          img{
            width: 0.26rem;
            height: 0.21rem;
            margin-left: 0.34rem;
            vertical-align: middle;
          }
          span{
            color: #ffffff;
            font-size: 0.24rem;
            margin-left: 0.06rem;
            line-height: 0.21rem;
            vertical-align: middle;
          }
        }
      }
      .infoBox{
        color: #ffffff;
        padding-top: 0.25rem;
        padding-left: 3.23rem;
        padding-right: 0.37rem;
        .p1{
          font-size: 1.83rem;
          font-weight: bold;
        }
        .p2{
          font-size: 0.92rem;
          font-weight: bold;
          line-height: 1.22rem;
        }
        .p3{
          font-size: 0.22rem;
          text-align: center;
          margin-top: 0.16rem;
        }
      }
    }
    .part2{
      width: 100%;
      height: 13.34rem;
      background: url('../../assets/wap/outbg2@2x.png') no-repeat;
      background-size: 100% 100%;
      .introBox{
        width:6.08rem;
        height:6.16rem;
        background:rgba(31,31,31,0.7);
        margin-top: 1.05rem;
        margin-left: 0.41rem;
        box-sizing: border-box;
        padding-top: 1.65rem;
        padding-left: 0.37rem;
        position: relative;
        .line{
          width:0.52rem;
          height:0.08rem;
          background:rgba(250,65,18,1);
        }
        .ideaBox{
          display: flex;
          align-items: flex-end;
          padding-top: 0.5rem;
          .txt{
            color: #ffffff;
            font-size: 0.6rem;
            font-weight: bold;
          }
          .pie{
            width:0.22rem;
            height:0.22rem;
            background:rgba(253,55,28,1);
            border-radius:50%;
            margin-left: 0.15rem;
          }
        }
        .p2{
          padding-top: 0.62rem;
          padding-left: 0.3rem;
          padding-right: 0.67rem;
          color: #ffffff;
          font-size: 0.24rem;
          line-height:0.43rem;
        }
        .phoneBox{
          width:2.05rem;
          height:0.62rem;
          background:rgba(255,255,255,0);
          border:1px solid rgba(255,255,255,1);
          font-size: 0.24rem;
          font-weight: bold;
          color: #ffffff;
          position: absolute;
          left: 0.45rem;
          bottom: 0.59rem;
          text-align: center;
          line-height: 0.62rem;
        }
      }
    }
    .part3{
      width: 100%;
      height: 7.54rem;
      background: url('../../assets/wap/outbg3@2x.png') no-repeat;
      background-size: 100% 100%;
      .titleBox{
        padding-left: 0.4rem;
        padding-top: 0.67rem;
        .en{
          color: #1F1F1F;
          font-size: 0.4rem;
          font-weight: bold;
        }
        .cn{
          color: #40363A;
          font-size: 0.3rem;
          margin-top: 0.08rem;
        }
      }
      .goodBox{
        display: flex;
        padding-left: 0.41rem;
        padding-top: 0.8rem;
        .left{
          width: 50%;
          flex-grow: 1;
        }
        .right{
          width: 50%;
          flex-grow: 1;
        }
        .line{
          .p1{
            display: flex;
            align-items: flex-start;
            padding-bottom: 0.22rem;
            .txt{
              color: #1F1F1F;
              font-size: 0.54rem;
              font-weight: bold;
            }
            .flag{
              color: #1F1F1F;
              font-size: 0.31rem;
              font-weight: bold;
            }
          }
          .p2, .p3, .p4{
            color: #000000;
            font-size: 0.24rem;
            line-height: 0.3rem;
          }
        }
        .line2{
          padding-top: 0.96rem;
        }
        .line4{
          padding-top: 0.72rem;
        }
      }
    }
    .part4{
      .mapBox{
        display: flex;
        height: 4.12rem;
        padding-left: 0.38rem;
        .left{
          flex-grow: 1;
          height: 100%;
          background: #1F1F1F;
          padding-left: 0.36rem;
          padding-top: 1.08rem;
          box-sizing: border-box;
          .p1{
            color: #ffffff;
            font-weight: bold;
            font-size: 0.4rem;
          }
          .line{
            width:0.36rem;
            height:0.04rem;
            background:rgba(250,65,18,1);
            margin-top: 0.23rem;
          }
          .address{
            padding-top: 0.48rem;
            .icon{
              width: 0.2rem;
              height: 0.24rem;
            }
            span{
              color: #ffffff;
              font-size: 0.24rem;
              margin: 0.14rem;
            }
          }
          .phone{
            padding-top: 0.42rem;
            display: inline-block;
            .icon{
              width: 0.26rem;
              height: 0.21rem;
            }
            span{
              color: #ffffff;
              font-size: 0.24rem;
              margin: 0.09rem;
            }
          }
        }
        .right{
          width: 2.6rem;
          height: 100%;
        }
      }
      .bottom{
        height: 1.82rem;
        padding-left: 0.41rem;
        padding-top: 0.49rem;
        box-sizing: border-box;
        .phone{
          display: inline-block;
          width:2.03rem;
          height:0.58rem;
          background:rgba(253,55,26,1);
          border:1px solid rgba(253,55,26,1);
          line-height: 0.58rem;
          text-align: center;
          color: #FFFFFF;
          font-size: 0.24rem;
        }
      }
    }
  }
}
</style>
<template>
<div class="outMoneyBox">
  <transition name="bounce">
    <NavDraw @close='closeClicked' @linked='linkedClicked' v-if="isOpenedNavDraw"></NavDraw>
  </transition>
  <div class="wrap" v-if="!isOpenedNavDraw">
    <div class="part1">
      <HeaderNav  @openNav='openNavClicked'></HeaderNav>
      <div class="introBox">
        <div class="line"></div>
        <p class="title">公司介绍</p>
        <p class="ct1 ct">鼎晟恒基（北京）金融服务外包有限公司是一家集助贷、个人汽车抵押贷款、房地产经纪咨询、由存量商品房买卖衍生的房产过户垫资解压、房产抵押贷款到期"过桥"垫资等业务，提供专业咨询和解决方案的金融服务公司。</p>
        <p class="ct2 ct">本公司秉承"鼎力协作，晟世前行，恒久发展，基业长青"的企业文化与创业精神，聚集了一批从业多年的中、高层管理者和资深业务骨干，专注于用互联网思维解决行业发展疼点，引导行业未来发展方向，致力于搭建一个开放式金融信息发布与金融撮合服务平台。</p>
        <a href="tel:010-87506918" class="phoneBox">
          <img src="../../assets/wap/outbg1-1@2x.png" alt="" >
          <span>010-87506918</span>
        </a>
      </div>
      <div class="infoBox">
        <p class="p1">贷款</p>
        <p class="p2">就找鼎晟</p>
        <p class="p3">— 让您远离资金周转困局 —</p>
      </div>
    </div>
    <div class="part2">
      <HeaderNav  @openNav='openNavClicked'></HeaderNav>
      <div class="introBox">
        <div class="line"></div>
        <p class="ideaBox">
          <span class="txt">公司理念</span>
          <span class="pie"></span>
        </p>
        <p class="p2">秉承“鼎力协作、晟世前行、恒久发展、基业长青”的企业文化与创业精神</p>
        <a href="tel:010-87506918" class="phoneBox">
          联系我们
        </a>
      </div>
    </div>
    <div class="part3">
      <HeaderNav :logoSelect='2' :txtSelect='2' :navSelect='2' @openNav='openNavClicked' :styleHeight='partNavHeight'></HeaderNav>
      <div class="titleBox">
        <p class="en">Advantages</p>
        <p class="cn">我们的优势</p>
      </div>
      <div class="goodBox">
        <div class="left">
          <div class="line">
            <p class="p1">
              <span class="txt">高效</span>
              <span class="flag">+</span>
            </p>
            <p class="p2">放款快</p>
            <p class="p3">手续便捷当天放款</p>
          </div>
          <div class="line2 line">
            <p class="p1">
              <span class="txt">专业</span>
              <span class="flag">+</span>
            </p>
            <p class="p2">专业助贷 </p>
            <p class="p3">针对不同需求客户提供个</p>
            <p class="p4">性化贷款服务</p>
          </div>
        </div>
        <div class="right">
          <div class="line">
            <p class="p1">
              <span class="txt">安全</span>
              <span class="flag">+</span>
            </p>
            <p class="p2">第三方监管</p>
            <p class="p3">保证客户信息安全</p>
            <p class="p4">与资金安全</p>
          </div>
          <div class="line4 line">
            <p class="p1">
              <span class="txt">额度高</span>
              <span class="flag">+</span>
            </p>
            <p class="p2">满成放款</p>
            <p class="p3">个性化匹配最低利</p>
            <p class="p4">率产品</p>
          </div>
        </div>
      </div>
    </div>
    <div class="part4">
      <div class="mapBox">
        <div class="left">
          <p class="p1">Map</p>
          <div class="line"></div>
          <div class="address">
            <img src="../../assets/wap/outbg4-1@2x.png" alt="" class="icon">
            <span>北京市丰台区城南大道1座1509室</span>
          </div>
          <a class="phone" href="tel:010-87506918">
            <img src="../../assets/wap/outbg4-2@2x.png" alt="" class="icon">
            <span>010-87506918</span>
          </a>
        </div>
        <div class="right" id="maprightBox"></div>
      </div>
      <div class="bottom">
        <a class="phone" href="tel:010-87506918">
          联系我们
        </a>
      </div>
    </div>
    <Footer @openNav='openNavClicked'></Footer>
  </div>
</div>
</template>
<script>
import Mixmin from './mixin/same'
export default {
  data() {
    return {
      partNavHeight: '0.99rem'
    }
  },
  mixins: [Mixmin],
  mounted() {
    var map = new BMap.Map("maprightBox");          // 创建地图实例  
    var point = new BMap.Point(116.3759370000, 39.8387670000);  // 创建点坐标  
    map.centerAndZoom(point, 25);
    var marker = new BMap.Marker(point);        // 创建标注    
    map.addOverlay(marker);
    map.enableScrollWheelZoom(true);
  }
}
</script>